<template>
	<view class="tabs flex-x-between bg-white">
		<text v-for="(item,index) in navList" :key="index" @click="handleSwitch(item.state, index)" :class="{'nav-item relative': true, 'checked': index===checkedNav}">{{item.name}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedNav: 0,
			}
		},
		props: ['navList'],
		methods: {
			handleSwitch(state, i) {
				this.checkedNav = i
			}
		}
	}
</script>

<style lang="less">
	.tabs {
		box-shadow: 1rpx 1rpx 1rpx 0rpx rgba(204, 204, 204, 0.5);
		.nav-item {
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333333;

			&.checked {
				color: #E41806;

				&::after {
					position: absolute;
					bottom: -1rpx;
					left: 50%;
					width: 36rpx;
					margin-left: -18rpx;
					content: '';
					display: inline-block;
					height: 4rpx;
					background: #E41806;
				}
			}
		}
	}
</style>
